/*
 登录路由组件
* */

import React, {Component} from 'react';
import cssModule from './login.module.less'
import {connect} from 'react-redux'   // 用户包装发送axios用的
import {$Login} from '../../redux/action' // 获取包装好的接口
import {Redirect} from 'react-router-dom' // 获取重定向的方法


import {Button, InputItem, Toast} from "antd-mobile";  //UI库


class Login extends Component {
    state = {
        Account: "",
        PassWord: "",
        Code: "",

        IsLoading: false
    }
    // 监听表单事件
    onChangeInput = (type, val) => {
        // console.log(type,this.state[type])
        this.setState({
            [type]: val
        })
    }
    // 跳转登录页面
    toLogin = () => this.props.history.replace('/register')
    // 点击下一步
    onNext = async () => {
        let config = [
            {
                tip: "手机号不能为空！",
                value: !this.state.Account.replace(/\s+/g, "")
            },
            {
                tip: "密码不能为空！",
                value: !this.state.PassWord
            },
            {
                tip: "手机号格式错误！",
                value: !(/^1[3456789]\d{9}$/g.test(this.state.Account.replace(/\s+/g, "")))
            }
        ]
        //  config.count = 用来判断所有的校验是否都通过了
        config.count = 0
        for (let i in config) {
            if (config[i].value) {
                Toast.info(config[i].tip, 2);
                config.count++
                break;
            }
        }
        if (config.count === 0) {
            this.setState({
                IsLoading: true
            })
            await this.props.$Login(this.state)
            // let {user} = this.props
            this.setState({
                IsLoading: false
            })
        }

    }

    componentDidUpdate(e) {

    }

    render() {
        let {code, msg, data, RedirectTo} = this.props.user
        if (RedirectTo) {
            return <Redirect to={RedirectTo}/>
        }
        return (
            <div className={`${cssModule.yp} bg-White hei100-scroll`}>
                <h3 className='fo-30 font-wei600 mt40'>账号密码登录</h3>
                <InputItem className='mt20 line-1-d5d4d4-bottom '
                           labelNumber={2}
                           clear
                           type="phone"
                           placeholder="输入手机号码"
                           onChange={(val) => this.onChangeInput('Account', val)}
                >
                    <i className="iconfont">&#xe7ae;</i>
                </InputItem>
                <InputItem className='mt20 line-1-d5d4d4-bottom '
                           labelNumber={2}
                           clear
                           type="PassWord"
                           placeholder="输入密码"
                           onChange={(val) => this.onChangeInput('PassWord', val)}
                >
                    <i className="iconfont">&#xe7c9;</i>
                </InputItem>
                <Button loading={this.state.IsLoading} className='mt20' type="primary"
                        onClick={this.onNext}>下一步</Button>
                <div className='mt20 fo-blue' onClick={this.toLogin}>手机号登录</div>
                <div className={cssModule.thirdLogin}>
                    <div>微信登录</div>
                </div>
                <footer className={cssModule.footer}>阅读 <a>《洋聘协议》</a></footer>
            </div>
        );
    }
}

export default connect(
    state => ({user: state.user}),
    {$Login}
)(Login);